<template>
  <div class="hello">
    <div class="head" @click="into">
      <div class="top">
        <div class="logo">
          <img
            v-if="userinfo.head_img"
            :src="$axios.defaults.baseURL + userinfo.head_img"
            alt=""
          />
          <img v-else src="../assets/2.jpg" alt="" />
        </div>

        <div class="name">
          <span
            class="iconfont"
            :class="{
              iconxingbienan: userinfo.gender === 1,
              iconxingbienv: userinfo.gender === 0,
            }"
          ></span>
          {{ userinfo.nickname || userinfo.username }}
          <p>2020-01-01</p>
        </div>
      </div>

      <span class="iconfont iconjiantou1"></span>
    </div>
    <Commonmessage
      person="我的关注"
      news="关注的用户"
      @click.native="visit"
    ></Commonmessage>
    <Commonmessage
      person="我的跟帖"
      news="跟帖/回复"
      @click.native="$router.push('/mycomment')"
    ></Commonmessage>
    <Commonmessage
      person="我的收藏"
      news="文章/视频"
      @click.native="collect"
    ></Commonmessage>
    <Commonmessage person="设置"></Commonmessage>
    <Commonmessage person="退出" @click.native="quit"></Commonmessage>
    <Commonmessage person="去首页" @click.native="big"></Commonmessage>
  </div>
</template>

<script>
// 引入子组件
import Commonmessage from "../components/Commonmessage";
export default {
  data() {
    return {
      userinfo: "", //将数据保存起来
    };
  },
  //  mounted生命周期-创建阶段完成
  created() {
    this.$axios({
      url: "user/" + localStorage.getItem("userId"),
      headers: { Authorization: localStorage.getItem("token") },
    }).then((res) => {
      console.log(res.data);
      const { message, data } = res.data;
      if (message == "获取成功") {
        this.userinfo = data;
      } else {
        this.$toast("信息获取失败");
        // 当发现token和id是假的时会做下面操作
        localStorage.removeItem("token");
        localStorage.removeItem("userId");
        this.$router.push("/"); //不会替换页面
        // this.$router.replace("/"); //会替换页面
      }
    });
  },

  //  mounted生命周期-模板渲染完成
  mounted() {
    console.log(localStorage.getItem("token"));
  },
  //  components: [ Commonmessage ],这是里对象
  components: { Commonmessage },
  methods: {
    collect() {
      this.$router.replace("/collect");
    },
    // 去首页
    big() {
      this.$router.replace("/");
    },
    into() {
      this.$router.replace("/compile");
    },
    visit() {
      this.$router.replace("/myattention");
    },
    quit() {
      localStorage.removeItem("token");
      localStorage.removeItem("userId");
      // this.$router.push("/"); //不会替换页面
      this.$router.replace("/"); //会替换页面
      this.$toast("退出成功");
    },
  },
};
</script>

<style lang="less" scoped>
.hello {
  min-height: 100vh;
  background-color: #f2f2f2;
}
.head {
  display: flex;
  align-items: center;
  padding: 20/360 * 100vw;
  border-bottom: #e4e4e4 4px solid;

  .top {
    flex: 1;
    display: flex;
    align-items: center;
    .logo {
      img {
        border-radius: 50%;
        width: 70/360 * 100vw;
        height: 70/360 * 100vw;
      }
    }
    .name {
      padding-left: 15/360 * 100vw;
      font-size: 14/360 * 100vw;
      .iconxingbienan {
        color: skyblue;
      }
      p {
        font-size: 14px;
        color: #c3aba0;
      }
    }
  }
  .iconjiantou1 {
    color: #d3d3d3;
  }
  .iconxingbienv {
    color: skyblue;
  }
}
</style>